<template>
  <div v-if="show">
    <template v-if="data.type === 'grid'">
      <a-form-item label="列配置项" >
        <draggable tag="ul" :list="data.columns" 
            v-bind="{group:{ name:'options'}, ghostClass: 'ghost', handle: '.drag-item'}"
            handle=".drag-item"
          >
          <li v-for="(item, index) in data.columns" :key="index">
            <span class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;">
              <i class="iconfont icon-icon_bars" />
            </span>
            <a-input-number v-model="item.span" :min="0" :max="24" size="small"/>
            <a-button type="danger" shape="circle" icon="minus" @click="() => handleOptionsRemove(index)" size="small"/>
          </li>
        </draggable>
        <a-button type="link" @click="handleAddColumn" size="small">添加列</a-button>
      </a-form-item>

      <a-form-item label="栅格间隔">
        <a-input-number v-model="data.options.gutter" :min="0"  />
      </a-form-item>
      <a-form-item label="水平排列方式">
        <a-select v-model="data.options.justify" style="width: 100%"
          :options="justifyOptions"
        />
      </a-form-item>
      <a-form-item label="垂直排列方式">
        <a-select v-model="data.options.align" style="width: 100%"
          :options="alignOptions"
        />
      </a-form-item>
    </template>
    <template v-else>
      <a-form-item label="布局" size="small">
        <div>
          <label>宽度：</label>
          <a-input v-model="data.options.width" :style="{ width: '100px' }" />
        </div>
        <div>
          <label>标签宽度：</label>
          <a-input-number v-model="data.options.labelCol" :min="1" :max="24" />
        </div>
        <div>
          <label>输入控件宽度：</label>
          <a-input-number v-model="data.options.wrapperCol" :min="1" :max="24" />
        </div>
        <div v-if="data.type === 'textarea'">
          <label>行数：</label>
          <a-input-number v-model="data.options.rows" :min="1" :max="10" />
        </div>
      </a-form-item>
      <a-form-item label="字段标识">
        <a-input v-model="data.model" />
      </a-form-item>
      <a-form-item label="标题">
        <a-input v-model="data.name" />
      </a-form-item>
      <template v-if="Object.keys(data.options).includes('placeholder')">
        <a-form-item label="占位内容">
          <a-input v-model="data.options.placeholder" />
        </a-form-item>
      </template>
      <template v-if="data.type === 'radio'">
        <a-form-item label="选项">
          <a-radio-group v-model="data.options.defaultValue" size="small">
            <draggable tag="ul" :list="data.options.options" 
              v-bind="{group:{ name:'options'}, ghostClass: 'ghost', handle: '.drag-item'}"
              handle=".drag-item"
            >
              <li v-for="(item, index) in data.options.options" :key="index">
                <a-radio :value="item.value">
                  <a-input v-model="item.value" style="width: 90px" />
                  <a-input v-model="item.label" style="width: 90px" />
                </a-radio>
                <span class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;">
                  <i class="iconfont icon-icon_bars" />
                </span>
                <a-button type="danger" shape="circle" icon="minus" @click="() => handleOptionsRemove(index)" size="small"/>
              </li>
            </draggable>
            <a-button type="link" @click="handleAddOption" size="small">添加选项</a-button>
          </a-radio-group>
        </a-form-item>
      </template>
      <template v-if="data.type === 'checkbox'">
        <a-form-item label="选项">
          <a-checkbox-group v-model="data.options.defaultValue" size="small">
            <draggable tag="ul" :list="data.options.options" 
              v-bind="{group:{ name:'options'}, ghostClass: 'ghost', handle: '.drag-item'}"
              handle=".drag-item"
            >
              <li v-for="(item, index) in data.options.options" :key="index">
                <a-checkbox :value="item.value">
                  <a-input v-model="item.value" style="width: 90px" />
                  <a-input v-model="item.label" style="width: 90px" />
                </a-checkbox>
                <span class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;">
                  <i class="iconfont icon-icon_bars" />
                </span>
                <a-button type="danger" shape="circle" icon="minus" @click="() => handleOptionsRemove(index)" size="small"/>
              </li>
            </draggable>
            <a-button type="link" @click="handleAddOption" size="small">添加选项</a-button>
          </a-checkbox-group>
        </a-form-item>
      </template>
      <template v-if="['input','textarea'].includes(data.type)">
        <a-form-item label="默认值">
          <a-input
            v-if="data.type !== 'textarea'"
            v-model="data.options.defaultValue"
          />
          <a-textarea
            v-if="data.type === 'textarea'"
            v-model="data.options.defaultValue"
            :rows="4"
          />
        </a-form-item>
      </template>
      <a-form-item label="校验">
        <a-checkbox v-model="data.options.required">必填</a-checkbox>
      </a-form-item>
    </template>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
export default {
  name: 'WidgetConfig',
  components: {
    Draggable,
  },
  props: ["data"],
  data() {
    return {
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null,
      },
      justifyOptions: [
        {value: 'start', label: 'start'},
        {value: 'end', label: 'end'},
        {value: 'center', label: 'center'},
        {value: 'space-around', label: 'space-around'},
        {value: 'space-between', label: 'space-between'}
      ],
      alignOptions: [
        {value: 'top', label: 'top'},
        {value: 'middle', label: 'middle'},
        {value: 'bottom', label: 'bottom'},
      ]
    };
  },
  computed: {
    show() {
      return this.data && Object.keys(this.data).length > 0;
    },
  },
  watch: {
    "data.options.required": function (val) {
      this.validateRequired(val);
    },
  },
  methods: {
    validateRequired(val) {
      if (val) {
        this.validator.required = { required: true, message: `必填` };
      } else {
        this.validator.required = null;
      }
      this.$nextTick(() => {
        this.generateRule();
      });
    },
    generateRule() {
      if (!this.data){
        return
      }
      this.data.rules = [];
      Object.keys(this.validator).forEach((key) => {
        if (this.validator[key]) {
          this.data.rules.push(this.validator[key]);
        }
      });
    },
    handleAddColumn() {
      this.data.columns.push({
        span: 1,
        list: [],
      })
    },
    handleAddOption(){
      const value = 'new' + this.data.options.options.length;
      this.data.options.options.push({
        label: value,
        value,
      });
    },
    handleOptionsRemove(index) {
      if (this.data.type === 'grid') {
        this.data.columns.splice(index, 1);
      } else {
        this.data.options.options.splice(index, 1);
      }
    },
  },
};
</script>

<style></style>
